<template>
  <div class="content">
    <el-dialog :visible.sync="isShow" width="1200px">
      <el-tabs tab-position="left" style="height: 600px;" v-model="currentTab" @tab-click="tabClick">
        <el-tab-pane label="商品列表" name="itemList">
          <selectItemList ref="selectItemList"></selectItemList>
        </el-tab-pane>
        <el-tab-pane label="单个商品" name="item">
          <selectItem ref="selectItem"></selectItem>
        </el-tab-pane>
        <el-tab-pane label="商家列表" name="shopList">
          <selectShopList ref="selectShopList"></selectShopList>
        </el-tab-pane>
        <el-tab-pane label="页面" name="page">
          <selectPage ref="selectPage"></selectPage>
        </el-tab-pane>
        <el-tab-pane label="富文本" name="richtext">
          <div>
            <Editor v-model="richtext" :height="600" />
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-left: 100px;margin-top: 20px;">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Editor from '@/components/Editor';
import selectItem from './selectItem.vue';
import selectItemList from './selectItemList.vue';
import selectShopList from './selectShopList.vue';
import selectPage from './selectPage.vue';
import {tools} from '@/utils/tools.js'
export default {
  components: {Editor, selectItem, selectItemList, selectShopList, selectPage},
  props:{
    
  },
  data() {
      return {
        richtext: '',
        isShow: false,
        currentTab: 'itemList',
      }
  },
  created(){
      if(this.$route.query.richtext){
        this.richtext = this.$route.query.richtext
      }
  },
  methods: {
    show(){
      this.isShow = true
    },
    close(){
      this.isShow = false
    },
    // 功能点击事件
    functionAction(item){
      this.$set(this.currentFun, 'select', false)
      this.$set(item, 'select', true)
      this.currentFun = item

    },
    tabClick(e){
      this.currentTab = e.name
      switch (this.currentTab) {
        case 'item':
          // this.$refs.selectItem.formKey = 'filterItem'
          // this.$refs.selectItem.getFormData()
          break;
        case 'itemList':
          // this.$refs.selectItemList.formKey = 'filterItem'
          // this.$refs.selectItemList.getFormData()
          break;
        default:
          break;
      }
    },
    confirm(){
      var query = {}
      switch (this.currentTab) {
        case 'richtext':
          query.routeName = 'protocolView'
          query.modal = 'push'
          query.content = this.richtext
          break;
        case 'page':
          query = this.$refs.selectPage.query
          // query.modal = this.$refs.selectPage.currentFun.modal
          break;
        case 'item':
          if(!this.$refs.selectItem.selectedItem.id){
            this.$message.error('请选择商品');
            return
          }
          query.routeName = 'itemDetail'
          query.modal = 'push'
          query.obj_id = this.$refs.selectItem.selectedItem.id
          break;
        case 'itemList':
          if(!this.$refs.selectItemList.itemFilter){
            this.$message.error('请选择筛选条件');
            return
          }
          query.routeName = 'itemList'
          query.modal = 'push'
          query = Object.assign(query, tools.paramsToObj(this.$refs.selectItemList.itemFilter))
          break;
        case 'shopList':
          if(!this.$refs.selectShopList.itemFilter){
            this.$message.error('请选择筛选条件');
            return
          }
          query.routeName = 'shopList'
          query.modal = 'push'
          query = Object.assign(query, tools.paramsToObj(this.$refs.selectShopList.itemFilter))
          break;
          
        default:
          break;
      }
      this.$emit('handleSelect', JSON.stringify(query))
      this.isShow = false
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
